<template>
  <div class="system-role-container layout-padding">
    <div
      class="system-role-padding layout-padding-auto layout-padding-view my_positon"
    >
      <div class="title_state">
        <div>
          <svg
            class="icon"
            style="
              width: 25px;
              height: 25px;
              vertical-align: middle;
              fill: currentcolor;
              overflow: hidden;
              --darkreader-inline-fill: currentcolor;
            "
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7741"
            data-darkreader-inline-fill=""
          >
            <path
              d="M111.1744 21.4016h795.5008c39.296 0 71.168 31.8592 71.168 71.1616v838.8864c0 39.3024-31.872 71.168-71.168 71.168H117.2864c-39.296 0-71.1616-31.8656-71.1616-71.168V86.4512A64.9984 64.9984 0 0 1 111.1744 21.4016z"
              fill="#CDF1F3"
              p-id="7742"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #104143"
            ></path>
            <path
              d="M906.6752 1022.624H117.2864C66.9568 1022.5728 26.176 981.7792 26.1376 931.456V86.4512C26.2144 39.5392 64.224 1.5232 111.136 1.4528h795.5392c50.3296 0.0512 91.1104 40.8448 91.1488 91.1744v838.8224c-0.0384 50.3296-40.8192 91.1232-91.1488 91.1744zM111.1616 41.376a45.088 45.088 0 0 0-44.9984 44.9984v844.9984a51.2512 51.2512 0 0 0 51.136 51.1616h789.376a51.2512 51.2512 0 0 0 51.136-51.1616V92.5504a51.2512 51.2512 0 0 0-51.136-51.1616L111.1616 41.376z"
              fill="#05BAC5"
              p-id="7743"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #048e96"
            ></path>
            <path
              d="M254.3872 163.84h523.776c51.7888 0 77.6896 25.8944 77.6896 77.6832v275.1616c0 51.7952-25.9008 77.696-77.696 77.696H254.3936c-51.7888 0-77.6896-25.9008-77.6896-77.696V241.5232c0-51.7888 25.9008-77.6832 77.6896-77.6832z"
              fill="#FFFFFF"
              p-id="7744"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #dcdbd8"
            ></path>
            <path
              d="M778.176 614.3744H254.4256c-53.9264-0.0576-97.632-43.7568-97.6896-97.6896V241.5104c0.0576-53.9264 43.7632-97.632 97.6896-97.6832h523.7504c53.9264 0.0512 97.632 43.7568 97.6896 97.6832v275.1744c-0.064 53.9328-43.7632 97.632-97.6896 97.6896zM254.4256 183.8272a57.7344 57.7344 0 0 0-57.6768 57.6704v275.1872a57.7344 57.7344 0 0 0 57.6768 57.6768h523.7504a57.7344 57.7344 0 0 0 57.6768-57.6768V241.5104a57.7344 57.7344 0 0 0-57.6768-57.6704l-523.7504-0.0128z"
              fill="#05BAC5"
              p-id="7745"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #40e4ed"
            ></path>
            <path
              d="M176.704 788.1344a72.288 72.288 0 1 0 144.576 0c0-39.9232-32.3712-72.2816-72.2944-72.2816-39.9232 0-72.288 32.3584-72.288 72.2816z"
              fill="#FFFFFF"
              p-id="7746"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #dcdbd8"
            ></path>
            <path
              d="M248.9728 880.4352c-50.976 0-92.3008-41.3248-92.3008-92.3008 0-50.9696 41.3248-92.2944 92.3008-92.2944 50.976 0 92.3008 41.3248 92.3008 92.2944-0.0448 50.9568-41.344 92.256-92.3008 92.3008z m0-144.5824a52.288 52.288 0 1 0 0 104.576 52.288 52.288 0 0 0 0-104.576z"
              fill="#05BAC5"
              p-id="7747"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #40e4ed"
            ></path>
            <path
              d="M448.4992 788.1344c0 39.9232 32.3648 72.288 72.288 72.288 39.9232 0 72.288-32.3648 72.288-72.288a72.288 72.288 0 0 0-144.576 0z"
              fill="#FFFFFF"
              p-id="7748"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #dcdbd8"
            ></path>
            <path
              d="M520.7488 880.4352c-50.976 0-92.3008-41.3248-92.3008-92.3008 0-50.9696 41.3248-92.2944 92.3008-92.2944 50.976 0 92.3008 41.3248 92.3008 92.2944-0.0448 50.9568-41.344 92.256-92.3008 92.3008z m0-144.5824a52.288 52.288 0 1 0 52.288 52.288 52.3392 52.3392 0 0 0-52.288-52.288z"
              fill="#05BAC5"
              p-id="7749"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #40e4ed"
            ></path>
            <path
              d="M720.3136 788.1344c0 39.9232 32.3648 72.288 72.288 72.288 39.9232 0 72.288-32.3648 72.288-72.288 0-39.9232-32.3648-72.2816-72.288-72.2816-39.9232 0-72.288 32.3584-72.288 72.2816z"
              fill="#FFFFFF"
              p-id="7750"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #dcdbd8"
            ></path>
            <path
              d="M792.6016 880.4352c-50.976 0-92.3008-41.3248-92.3008-92.3008 0-50.9696 41.3248-92.2944 92.3008-92.2944 50.976 0 92.3008 41.3248 92.3008 92.2944-0.0512 50.9568-41.344 92.256-92.3008 92.3008z m0-144.5824a52.288 52.288 0 1 0 52.288 52.288 52.3392 52.3392 0 0 0-52.288-52.288zM617.7152 367.8848L466.816 509.6128c-7.9616 7.5008-21.024-0.5248-17.12-10.3872l33.0496-83.0656c2.496-6.4-2.496-13.2352-9.7792-13.2352h-67.584c-9.1776 0-13.8496-10.304-7.5008-16.5248L541.632 244.672c7.7952-7.6992 21.2544 0.0896 17.3952 10.0032l-31.904 83.36c-2.4256 6.4 2.6048 13.0624 9.7792 13.0624h73.4592c9.2608 0 13.9264 10.56 7.3536 16.7872z"
              fill="#05BAC5"
              p-id="7751"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #40e4ed"
            ></path>
            <path
              d="M111.1744 21.4016h795.5008c39.296 0 71.168 31.8592 71.168 71.1616v838.8864c0 39.3024-31.872 71.168-71.168 71.168H117.2864c-39.296 0-71.1616-31.8656-71.1616-71.168V86.4512A64.9984 64.9984 0 0 1 111.1744 21.4016z"
              fill="#CDF1F3"
              p-id="7752"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #104143"
            ></path>
            <path
              d="M906.6752 1022.624H117.2864C66.9568 1022.5728 26.176 981.7792 26.1376 931.456V86.4512C26.2144 39.5392 64.224 1.5232 111.136 1.4528h795.5392c50.3296 0.0512 91.1104 40.8448 91.1488 91.1744v838.8224c-0.0384 50.3296-40.8192 91.1232-91.1488 91.1744zM111.1616 41.376a45.088 45.088 0 0 0-44.9984 44.9984v844.9984a51.2512 51.2512 0 0 0 51.136 51.1616h789.376a51.2512 51.2512 0 0 0 51.136-51.1616V92.5504a51.2512 51.2512 0 0 0-51.136-51.1616L111.1616 41.376z"
              fill="#05BAC5"
              p-id="7753"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #048e96"
            ></path>
            <path
              d="M254.3872 163.84h523.776c51.7888 0 77.6896 25.8944 77.6896 77.6832v275.1616c0 51.7952-25.9008 77.696-77.696 77.696H254.3936c-51.7888 0-77.6896-25.9008-77.6896-77.696V241.5232c0-51.7888 25.9008-77.6832 77.6896-77.6832z"
              fill="#FFFFFF"
              p-id="7754"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #dcdbd8"
            ></path>
            <path
              d="M778.176 614.3744H254.4256c-53.9264-0.0576-97.632-43.7568-97.6896-97.6896V241.5104c0.0576-53.9264 43.7632-97.632 97.6896-97.6832h523.7504c53.9264 0.0512 97.632 43.7568 97.6896 97.6832v275.1744c-0.064 53.9328-43.7632 97.632-97.6896 97.6896zM254.4256 183.8272a57.7344 57.7344 0 0 0-57.6768 57.6704v275.1872a57.7344 57.7344 0 0 0 57.6768 57.6768h523.7504a57.7344 57.7344 0 0 0 57.6768-57.6768V241.5104a57.7344 57.7344 0 0 0-57.6768-57.6704l-523.7504-0.0128z"
              fill="#05BAC5"
              p-id="7755"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #40e4ed"
            ></path>
            <path
              d="M176.704 788.1344a72.288 72.288 0 1 0 144.576 0c0-39.9232-32.3712-72.2816-72.2944-72.2816-39.9232 0-72.288 32.3584-72.288 72.2816z"
              fill="#FFFFFF"
              p-id="7756"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #dcdbd8"
            ></path>
            <path
              d="M248.9728 880.4352c-50.976 0-92.3008-41.3248-92.3008-92.3008 0-50.9696 41.3248-92.2944 92.3008-92.2944 50.976 0 92.3008 41.3248 92.3008 92.2944-0.0448 50.9568-41.344 92.256-92.3008 92.3008z m0-144.5824a52.288 52.288 0 1 0 0 104.576 52.288 52.288 0 0 0 0-104.576z"
              fill="#05BAC5"
              p-id="7757"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #40e4ed"
            ></path>
            <path
              d="M448.4992 788.1344c0 39.9232 32.3648 72.288 72.288 72.288 39.9232 0 72.288-32.3648 72.288-72.288a72.288 72.288 0 0 0-144.576 0z"
              fill="#FFFFFF"
              p-id="7758"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #dcdbd8"
            ></path>
            <path
              d="M520.7488 880.4352c-50.976 0-92.3008-41.3248-92.3008-92.3008 0-50.9696 41.3248-92.2944 92.3008-92.2944 50.976 0 92.3008 41.3248 92.3008 92.2944-0.0448 50.9568-41.344 92.256-92.3008 92.3008z m0-144.5824a52.288 52.288 0 1 0 52.288 52.288 52.3392 52.3392 0 0 0-52.288-52.288z"
              fill="#05BAC5"
              p-id="7759"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #40e4ed"
            ></path>
            <path
              d="M720.3136 788.1344c0 39.9232 32.3648 72.288 72.288 72.288 39.9232 0 72.288-32.3648 72.288-72.288 0-39.9232-32.3648-72.2816-72.288-72.2816-39.9232 0-72.288 32.3584-72.288 72.2816z"
              fill="#FFFFFF"
              p-id="7760"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #dcdbd8"
            ></path>
            <path
              d="M792.6016 880.4352c-50.976 0-92.3008-41.3248-92.3008-92.3008 0-50.9696 41.3248-92.2944 92.3008-92.2944 50.976 0 92.3008 41.3248 92.3008 92.2944-0.0512 50.9568-41.344 92.256-92.3008 92.3008z m0-144.5824a52.288 52.288 0 1 0 52.288 52.288 52.3392 52.3392 0 0 0-52.288-52.288zM617.7152 367.8848L466.816 509.6128c-7.9616 7.5008-21.024-0.5248-17.12-10.3872l33.0496-83.0656c2.496-6.4-2.496-13.2352-9.7792-13.2352h-67.584c-9.1776 0-13.8496-10.304-7.5008-16.5248L541.632 244.672c7.7952-7.6992 21.2544 0.0896 17.3952 10.0032l-31.904 83.36c-2.4256 6.4 2.6048 13.0624 9.7792 13.0624h73.4592c9.2608 0 13.9264 10.56 7.3536 16.7872z"
              fill="#05BAC5"
              p-id="7761"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #40e4ed"
            ></path>
            <path
              d="M773.6128 714.336l-133.7472 231.68a37.728 37.728 0 0 0 32.672 56.5824h267.5008a37.728 37.728 0 0 0 32.672-56.5888l-133.7472-231.6736a37.728 37.728 0 0 0-65.3504 0z"
              fill="#FFFFFF"
              p-id="7762"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #dcdbd8"
            ></path>
            <path
              d="M940.0512 1022.624h-267.5008a57.728 57.728 0 0 1-50.0032-86.624l133.7536-231.68a57.7472 57.7472 0 0 1 100 0l133.7472 231.68a57.728 57.728 0 0 1-49.9968 86.624z m-149.1136-298.2848l-133.7472 231.6736a17.728 17.728 0 0 0 15.3472 26.5984h267.5008a17.728 17.728 0 0 0 15.3472-26.5984l-133.7472-231.68a17.7344 17.7344 0 0 0-30.7136 0h0.0128z"
              fill="#F33F2B"
              p-id="7763"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #e84937"
            ></path>
            <path
              d="M822.6624 933.6256a21.9968 21.9968 0 0 1 6.56 16.0768 22.6368 22.6368 0 0 1-6.56 16.3712 24.16 24.16 0 0 1-16.672 6.2528 21.9776 21.9776 0 0 1-16.0896-6.5792c-4.7744-4.16-6.8608-9.5232-6.8608-16.0704 0-6.5536 2.0864-11.9168 6.8608-16.0768a21.7472 21.7472 0 0 1 16.0768-6.2528c6.1632-0.16 12.16 2.0864 16.6848 6.272z m3.5776-173.9392l-7.5008 151.6032h-25.2672L785.984 759.68h40.256z"
              fill="#F33F2B"
              p-id="7764"
              data-darkreader-inline-fill=""
              style="--darkreader-inline-fill: #e84937"
            ></path>
          </svg>
        </div>

        &nbsp; 实时人力负荷状态
      </div>
      <el-row style="padding: 25px" align="middle"> </el-row>

      <el-row>
        <el-col :span="5">
          <!-- 人名 -->
          <el-scrollbar :max-height="activeHeight">
            <div class="p_title" data-v-15b80842="">
              全部人员信息

              <div class="select_inpt">
                <div class="input_selecrt">
                  <el-select
                    :filter-method="matchFruit"
                    size="small"
                    v-model="personName"
                    multiple
                    filterable
                    collapse-tags
                    collapse-tags-tooltip
                    placeholder="输入人名查询"
                    style="width: 150px"
                  >
                    <el-option
                      v-for="item in list_filtered"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
            </div>
            <el-tree
              node-key="user_name"
              :data="InfoData"
              :props="defaultProps"
              @node-click="nodeClick"
              :expand-on-click-node="false"
              :highlight-current="true"
              default-expand-all
            >
              <template #default="{ node }">
                <div class="custom-tree-node">
                  <div style="margin-right: 10px">
                    <svg
                      class="icon"
                      style="
                        width: 20px;
                        height: 20px;
                        vertical-align: middle;
                        fill: currentcolor;
                        overflow: hidden;
                        --darkreader-inline-fill: currentcolor;
                      "
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="18378"
                      data-darkreader-inline-fill=""
                    >
                      <path
                        d="M712.3712 356.736h42.88c23.3728 0 38.912-15.616 38.912-39.0144s-15.5648-39.04-38.912-39.04h-42.88c-19.456-109.3632-113.024-195.328-229.9392-195.328-116.9152 0-210.432 85.8624-229.9904 195.2H209.664c-23.3728 0-38.912 15.616-38.912 39.04 0 23.3728 15.5904 39.0144 38.912 39.0144h502.7328v0.128zM579.9424 643.584c81.7664-40.96 136.3712-133.1712 136.3712-215.0912H248.6528c0 81.92 54.5536 170.7264 136.3712 215.0912 11.6992 6.8352 19.456 17.0752 19.456 30.72 0 17.0752-15.5648 34.1504-35.0464 34.1504-42.8544 6.8352-81.8432 17.0752-120.832 27.3152v204.8768H642.304a179.072 179.072 0 0 1 20.5312-218.4704c-22.4768-4.8128-44.928-8.1152-67.3792-13.7216-19.456-3.4304-35.072-17.0752-35.072-37.5808 0-10.24 7.808-20.48 19.456-27.3152l0.1024 0.0256z m112.4864 74.4448a179.0208 179.0208 0 1 1 253.184 253.184 179.0208 179.0208 0 0 1-253.184-253.184zM53.7856 923.392c0 10.368 7.7824 17.2544 19.456 17.2544H209.664v-193.024C123.904 785.5616 61.5936 840.704 53.76 923.392z m764.0576 20.1472c9.2928-16.9728 23.68-35.9424 41.856-54.1184 18.176-18.1248 37.12-32.512 54.0928-41.856-16.9728-9.2928-35.9424-23.68-54.0928-41.856-18.176-18.1504-32.5632-37.12-41.856-54.0928-9.3184 16.9728-23.7056 35.9424-41.856 54.0928-18.176 18.176-37.12 32.5632-54.1184 41.856 16.9728 9.3184 35.9424 23.7056 54.1184 41.856 18.176 18.176 32.5376 37.1456 41.856 54.1184z"
                        fill="#1CAEAF"
                        p-id="18379"
                        data-darkreader-inline-fill=""
                        style="--darkreader-inline-fill: #158485"
                      ></path>
                    </svg>
                  </div>

                  <span
                    >{{ node.data.index }} - {{ node.label }} -
                    {{ node.data.login_account }}</span
                  >
                </div>
              </template>
            </el-tree>
          </el-scrollbar>
        </el-col>
        <el-col :span="19">
          <div class="right_section">
            <el-scrollbar :height="activeHeight" :always="true">
              <div class="my_echart_inside">
                <div class="p_title2" data-v-15b80842="">
                  {{ clickData.user_name }}({{ clickData.login_account }}) -
                  未完成情况
                </div>
                <div style="width: 100%; height: 100%" ref="chartRef"></div>
              </div>

              <div class="right_table">
                <div class="p_title2" data-v-15b80842="">
                  {{ clickData.user_name }}({{ clickData.login_account }}) - {{ clickEcharts.name }} - ({{
                    tableData.length
                  }}台设备)
                </div>
                <el-table
                  :span-method="tableSpanMethod"
                  height="100%"
                  :data="tableData"
                  style="width: 100%"
                  :header-cell-style="{
                    background: 'rgb(250, 251, 252)',
                    color: '#333',
                  }"
                >
                  <el-table-column
                    width="150"
                    show-overflow-tooltip
                    prop="ProjNo"
                    label="项目位号"
                  ></el-table-column>
                  <el-table-column
                    width="300"
                    show-overflow-tooltip
                    prop="ProjName"
                    label="项目名称"
                  ></el-table-column>
                  <el-table-column prop="DesignStage" label="设计阶段">
                    <template #default="{ row }">
                      <div v-if="row.DesignStage == '工程图'">
                        {{ row.DesignStage }}
                      </div>

                      <div v-else style="color: red">{{ row.DesignStage }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="EquipNo"
                    label="设备位号"
                  ></el-table-column>
                  <el-table-column
                    prop="EquipName"
                    label="设备名称"
                  ></el-table-column>
                  <el-table-column
                    prop="EquipVersion"
                    label="版本"
                  ></el-table-column>
                </el-table>
              </div>
            </el-scrollbar>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
  <script setup>
import * as echarts from "echarts";
import { ref, onMounted, nextTick, watch } from "vue";
import { ElMessage } from "element-plus";
import { GetDepartmentUsersV2, GetUnFinishedTasks } from "/@/api/personState";
import PinYinMatch from "pinyin-match";
let InfoData = ref([]);
const activeHeight = ref(0);
// 目录树对应的映射
const defaultProps = {
  label: "user_name",
  login_account: "login_account",
};
// 所有用户的下拉框
let allUserOptions = ref([]);
let personName = ref(null);
let copyData = ref([]);
let chartRef = ref(null);
// 获取部门的全部数据
let GetDepartmentUsersV2Data = async () => {
  let res = await GetDepartmentUsersV2({ dept: "equipment" });
  allUserOptions.value = res.map((v) => {
    return {
      value: v.login_account,
      label: v.user_name,
    };
  });
  list_filtered.value = allUserOptions.value;
  let user = res.splice(0, 1);
  res.splice(1, 0, user[0]);
  // 把人员挑出来，对格式进行改造
  InfoData.value = res.map((v, i) => {
    return {
      ...v,
      index: i + +1,
    };
  });
 // 将改造好的数据深COPY一下，防止其他操作对源数据污染
  copyData.value = JSON.parse(JSON.stringify(InfoData.value));
};

let list_filtered = ref([]);
// 根据拼音进行过滤
let matchFruit = (searchContent) => {
  if (searchContent) {
    let result = [];
    allUserOptions.value.forEach((item) => {
      // matchResult 的值为 true/false
      let matchResult = PinYinMatch.match(item.label, searchContent);
      if (matchResult) {
        result.push(item);
      }
    });
    list_filtered.value = result;
  } else {
    list_filtered.value = allUserOptions.value;
  }
};

let myCharts;

// 人员名称的前端搜索逻辑
watch(personName, () => {
  if (personName.value.length == 0 || !personName.value) {
    InfoData.value = copyData.value;
  } else {
    InfoData.value = copyData.value.filter((v) => {
      return personName.value.some((item) => item == v.login_account);
    });
  }
});

onMounted(() => {
  // 动态表格高度
  activeHeight.value = document.querySelector(".el-main").clientHeight - 110;
  window.addEventListener("resize", () => {
    activeHeight.value = document.querySelector(".el-main").clientHeight - 110;
  });
  GetDepartmentUsersV2Data();

  setTimeout(() => {
    // 1秒后点击第一个数据
    document.querySelector(".el-tree-node")?.click();
  }, 1000);
});
let num = 0;
let clickData = ref({});
// 树节点的点击事件
const nodeClick = async (node) => {
  clickEcharts.value = {};
  clickData.value = node;
  if (!num) {
    // 初始化表格
    initChart();
  }
  num++;
  // 初始化完成后获取个人的工作未完成情况
  let res = await GetUnFinishedTasks({ user: clickData.value.user_name });
  if (res.length >= 0) {
    clickTableData.value = res;
    changeChart(res);
  } else {
    clickTableData.value = [];
    ElMessage.error("未获取到该人员工作未完成信息");
  }
};

let clickTableData = ref([]);
let options = ref({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      // Use axis to trigger tooltip
      type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
    },
  },
  legend: {
    show: true,
    bottom: "2%",
  },
  grid: {
    left: "0%",
    right: "1%",
    bottom: "20%",
    top: "5%",
    containLabel: true,
  },
  xAxis: {
    type: "value",
  },
  yAxis: {
    type: "category",
    data: ["Mon"],
  },
  series: [
    {
      name: "Direct",
      type: "bar",
      stack: "total",
      label: {
        show: true,
      },
      emphasis: {
        focus: "series",
      },
      data: [320],
    },
    {
      name: "Mail Ad",
      type: "bar",
      stack: "total",
      label: {
        show: true,
      },
      emphasis: {
        focus: "series",
      },
      data: [120],
    },
    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",
      label: {
        show: true,
      },
      emphasis: {
        focus: "series",
      },
      data: [220],
    },
    {
      name: "Video Ad",
      type: "bar",
      stack: "total",
      label: {
        show: true,
      },
      emphasis: {
        focus: "series",
      },
      data: [150],
    },
    {
      name: "Search Engine",
      type: "bar",
      stack: "total",
      label: {
        show: true,
      },
      emphasis: {
        focus: "series",
      },
      data: [820],
    },
  ],
});
// echarts数据的改变 （数据填充）
let changeChart = (data) => {
  // 先将数据清空  避免数据污染
  options.value.yAxis.data = [``];
  myCharts.clear();
  // 对图表进行数据写入
  options.value.series =
    data.length > 0
      ? data.map((v) => {
          return {
            name: v.TaskName,
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [v.UnFinishCount],
            myData: v,
          };
        })
      : (options.value.series = [
          {
            name: "暂无数据",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [0],
          },
        ]);

  myCharts?.setOption(options.value);

  if (Object.keys(clickEcharts.value).length == 0) {
    // 如果没有未完成的分类 就自定义一个名称
    clickEcharts.value = {
      name: "所有未完成设备",
      value: data[0]?.UnFinishCount,
    };
  }
};

let clickEcharts = ref({});
// 初始化图表内容
let initChart = () => {
  myCharts = echarts.init(chartRef.value);
  // 加入图表的点击事件
  myCharts.on("click", (params) => {
    clickEcharts.value = {
      name: params.seriesName,
      value: params.value,
    };
  });
};

let tableData = ref([]);
// 当鼠标点击图表的时候  需要有对应的表格数据
watch(
  clickEcharts,
  () => {
    // 这里判断鼠标是否第一次点击图表 如果是第一次点击图表
    if (clickEcharts.value.name == "所有未完成设备") {
      let arr = [];
      // 对后台返回的数据进行deep重构
      for (let i in clickTableData.value) {
        for (let item in clickTableData.value[i].UnFinishedTaskProjInfos) {
          for (let innerItem of clickTableData.value[i].UnFinishedTaskProjInfos[
            item
          ].UnFinishedTaskEquipInfos) {
            arr.push({
              ProjName:
                clickTableData.value[i].UnFinishedTaskProjInfos[item].ProjName,
              ProjNo:
                clickTableData.value[i].UnFinishedTaskProjInfos[item].ProjNo,
              ...innerItem,
            });
          }
        }
      }

      tableData.value = arr;
    } else {
      // 如果已经点击了图表 表格内容需要改变
      let obj =
        (clickTableData.value.length > 0 &&
          clickTableData.value.find(
            (v) => v.TaskName == clickEcharts.value.name
          )) || null;
      if (obj) {
        let arr = [];
        // 对后台返回的数据进行deep重构
        for (let i in obj.UnFinishedTaskProjInfos) {
          for (let item in obj.UnFinishedTaskProjInfos[i]
            .UnFinishedTaskEquipInfos) {
            arr.push({
              ProjName: obj.UnFinishedTaskProjInfos[i].ProjName,
              ProjNo: obj.UnFinishedTaskProjInfos[i].ProjNo,
              ...obj.UnFinishedTaskProjInfos[i].UnFinishedTaskEquipInfos[item],
            });
          }
        }

        tableData.value = arr;
      } else {
        tableData.value = [];
      }
    }
  },
  { deep: true }
);

// 合并单元格 第一 第二 单元格进行合并
let tableSpanMethod = ({ rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    return {
      rowspan: spanTable(
        createSpanrowData(tableData.value, ["ProjNo"]),
        rowIndex
      ).rowspan,
      colspan: spanTable(
        createSpanrowData(tableData.value, ["ProjNo"]),
        rowIndex
      ).colspan,
    };
  }
  if (columnIndex === 1) {
    return {
      rowspan: spanTable(
        createSpanrowData(tableData.value, ["ProjName"]),
        rowIndex
      ).rowspan,
      colspan: spanTable(
        createSpanrowData(tableData.value, ["ProjName"]),
        rowIndex
      ).colspan,
    };
  }
};


const spanTable = (spanArr, rowIndex) => {
  if (spanArr !== null && spanArr.length > 0) {
    for (let j = 0; j < spanArr.length; j++) {
      for (let i = 0; i < spanArr[j].spanLength; i++) {
        // 如果当前行是构造好的合并行数据的开始行，则返回rowspan:合并数据的合并行数量
        if (rowIndex === spanArr[j].fromIndex) {
          return {
            rowspan: spanArr[j].spanLength,
            colspan: 1,
          };
        } else if (
          rowIndex > spanArr[j].fromIndex &&
          rowIndex < spanArr[j].spanLength + spanArr[j].fromIndex
        ) {
          // 如果当前行大于构造好的合并行数据的开始行，小于合并行数据的开始行+合并数据的合并行数量，则返回rowspan:0
          return {
            rowspan: 0,
            colspan: 1,
          };
        }
      }
    }
  }
};

// 重构合并单元格的数据
const createSpanrowData = (paramData, propName) => {
  if (paramData !== null && paramData.length > 0) {
    let oneArr = [];
    let currentValue = "";
    let tempFromIndex = 0;
    let tempRowspan = 1;
    for (let i = 0; i < paramData.length; i++) {
      let tempValue = "";
      // 循环propName属性数组，拼接需要合并的级联连属性
      for (let j = 0; j < propName.length; j++) {
        tempValue += paramData[i][propName[j]];
      }
      if (currentValue === tempValue) {
        // 如果当前行与上一行列属性值相同，则合并行+1
        tempRowspan++;
      } else {
        // 如果当前行与上一行列属性值不同，则更新当前行数据，添加前一组的合并参数到数组中
        currentValue = tempValue;
        if (i !== 0) {
          oneArr.push({ fromIndex: tempFromIndex, spanLength: tempRowspan });
        }
        // 并重置合并行为默认值1，更新合并开始行为当前行i
        tempRowspan = 1;
        tempFromIndex = i;
      }
    }
    // 添加最后一组合并参数到数组中
    oneArr.push({ fromIndex: tempFromIndex, spanLength: tempRowspan });
    return oneArr;
  }
};
</script>
  <style scoped lang="scss">
.my_echart_inside {
  width: 100%;
  height: 40%;
}
.right_table {
  padding: 10px;
  width: 100%;
  height: 50%;
  margin-top: 44px;
}
.right_section {
  padding: 0 10px;
  border-left: 1px solid #eee;
}

.my_positon {
  position: relative;
  .title_state {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bolder;
    font-size: 20px;

    color: #666;
    display: flex;

    align-items: center;
    justify-content: center;
  }
}

.select_inpt {
  top: 1px;
  width: 150px;
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;

  .input_selecrt {
    .for_item {
      margin-right: 12px;
      padding: 8px 20px;
      font-size: 13px;
      border-radius: 5px;
      border: 1px solid #1890ff;
      color: #299cb4;
    }
    .for_item:hover {
      background: #65aef3;
      color: white;

      transition: 0.6s;
    }
    .activeDate {
      background: #1890ff;
      color: white;
      transition: 0.6s;
    }
    margin-right: 50px;
    span {
      font-size: 14px;
      display: block;
      display: flex;
      flex-wrap: nowrap;
      width: 74px;
      font-weight: bolder;
    }
    display: flex;
    align-items: center;
  }
}

::v-deep(.el-tree-node__content) {
  height: 42px;
}

.custom-tree-node {
  position: relative;
  width: 100%;

  display: flex;
  align-items: center;
}

.p_title {
  display: flex;

  align-items: center;
  padding-left: 35px;
  position: relative;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 15px;
}

.p_title:after {
  position: absolute;
  content: " ";
  left: 20px;
  height: 100%;
  width: 8px;
  background: #22abf9;
}

.p_title2 {
  display: flex;

  align-items: center;
  padding-left: 25px;
  position: relative;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 10px;
}

.p_title2:after {
  position: absolute;
  content: " ";
  left: 10px;
  height: 100%;
  width: 8px;
  background: #22abf9;
}
</style>
  